<template>
    <div class="pl_20 pr_20">
        <div class="tk_title">推广目标</div>
        <el-form-item label="品牌认知" prop="market" style="margin-bottom:5px">
            <el-radio-group v-model="noset" class="tk_radio" disabled>
                <el-radio label="VIDEO_PROM_GOODS">
                    <img src="@/assets/img/tk_action01.svg" alt="" class="market_icon">
                    <span class="market_name">覆盖人数</span>
                    <span class="market_text">向尽可能多的用户展示广告</span>
                    <img src="@/assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="受众意向" prop="market" style="margin-bottom:5px">
            <el-radio-group v-model="noset" class="tk_radio" disabled>
                <el-radio label="VIDEO_PROM_GOODS">
                    <img src="@/assets/img/tk_action02.svg" alt="" class="market_icon">
                    <span class="market_name">访问量</span>
                    <span class="market_text">吸引更多用户访问你的目标网站</span>
                    <img src="@/assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
                <el-radio label="VIDEO_PROM_GOODS">
                    <img src="@/assets/img/tk_action03.svg" alt="" class="market_icon">
                    <span class="market_name">视频播放量</span>
                    <span class="market_text">让您的视频广告获得更多播放量和互动</span>
                    <img src="@/assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
                <el-radio label="VIDEO_PROM_GOODS">
                    <img src="@/assets/img/tk_action04.svg" alt="" class="market_icon">
                    <span class="market_name">社区互动</span>
                    <span class="market_text">获得更多账号关注或主页访问等</span>
                    <img src="@/assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="行为转化" :prop="`base.${0}.objective_type`" :rules="{required: true, message: '请选择行为转化', trigger: ['blur', 'change']}" style="margin-bottom:0">
            <el-radio-group v-model="dataForm.base[0].objective_type" class="tk_radio">
                <el-radio label="VIDEO_PROM_GOODS1" disabled>
                    <img src="@/assets/img/tk_action05.svg" alt="" class="market_icon">
                    <span class="market_name">应用推广</span>
                    <span class="market_text">让更多用户安装并使用您的应用</span>
                    <img src="@/assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
                <el-radio label="VIDEO_PROM_GOODS2" disabled>
                    <img src="@/assets/img/tk_action06.svg" alt="" class="market_icon">
                    <span class="market_name">线索收集</span>
                    <span class="market_text">为业务开发潜在客户</span>
                    <img src="@/assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
                <el-radio label="VIDEO_PROM_GOODS3" disabled>
                    <img src="@/assets/img/tk_action07.svg" alt="" class="market_icon">
                    <span class="market_name">网站转化量</span>
                    <span class="market_text">吸引用户在您的网站上执行更多有价值的操作</span>
                    <img src="@/assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
                <el-radio label="PRODUCT_SALES">
                    <img src="@/assets/img/tk_action08.svg" alt="" class="market_icon">
                    <span class="market_name">商品销量</span>
                    <span class="market_text">销售来自你的TikTokShop、网站和应用的商品。</span>
                    <img src="@/assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
            </el-radio-group>
        </el-form-item>
    </div>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {
            noset: "",
        };
    },
    created() {},
    methods: {},
};
</script>


<style scoped>
.market_icon {
    width: 32px;
    height: 32px;
}
.market_name {
    font-size: 14px;
    color: #17233d;
    margin-top: 4px;
    line-height: 22px;
}
.market_text {
    font-size: 14px;
    color: #616c85;
    line-height: 22px;
    margin-top: 4px;
    width: 100%;
}
.market_check {
    position: absolute;
    right: 0px;
    top: 0px;
    display: none;
}
/deep/ .tk_radio .el-radio {
    margin-right: 20px;
    white-space: normal;
    font-size: 0;
    position: relative;
    margin-bottom: 12px;
}

/deep/ .tk_radio .el-radio.is-disabled::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.5);
    cursor: no-drop;
}

/deep/ .tk_radio .el-radio__input {
    width: 0;
    height: 0;
    visibility: hidden;
}

/deep/ .tk_radio .el-radio__label {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    width: 300px;
    display: flex;
    padding: 16px 20px;
    flex-direction: column;
    position: relative;
}

/deep/ .tk_radio .el-radio.is-checked .el-radio__label {
    border-color: #4475ff;
    background: rgba(68, 117, 255, 0.05);
}

/deep/ .tk_radio .el-radio.is-checked .el-radio__label .market_check {
    display: block;
}
</style>

